import BannerWave from "@/components/BannerWave/BannerWave";
import style from "./Love.module.scss";
import { useLove } from "./useLove";
import MiddleCard from "./MiddleCard/MiddleCard";
import TreeCardList from "./TreeCardList/TreeCardList";
import TimeLine from "./TimeLine/TimeLine";
export default function Love() {
    const { love, timeLen } = useLove()
  return (
    <div className={style["lx-love__wrap"]}>
      <div className={style['lx-love__header']}>
        <img className={style['lx-love__image']} src={love.bgCover} />
        <div className={style['lx-love__info']}>
          <div>
            <img className={style['lx-love__avatar']} src={love.manCover} />
            <div className={style['lx-love__title']}>{love.manName}</div>
          </div>
          <div>
            <img className={style['lx-love__heart']} src={love.heart} alt="心心" style={{ animation: 'imgScale 2s linear infinite'}} />
          </div>
          <div>
            <img className={style['lx-love__avatar']} src={love.womanCover} />
            <div className={style['lx-love__title']}>{love.womanName}</div>
          </div>
        </div>
        <div className={style['lx-love__wave']}>
          <BannerWave arrow={false} />
        </div>
      </div>

      <div className={style['lx-love__content']}>
        <div className={style['love-content']}>
          <div className={style['lx-love__time-list']}>
            <div className={style['love-time-title1']}>这是我们一起走过的</div>
            <div className={style['love-time1']}>
              第<span className={style['love-time1-item']} style={{ animation: 'jianBian 60s linear infinite'}}>{timeLen.year}</span>年
              <span className={style['love-time1-item']} style={{ animation: 'jianBian 60s linear infinite'}}>{timeLen.month}</span>月
              <span className={style['love-time1-item']} style={{ animation: 'jianBian 60s linear infinite'}}>{timeLen.day}</span>日
              <span className={style['love-time1-item']} style={{ animation: 'jianBian 60s linear infinite'}}>{timeLen.hour}</span>时
              <span className={style['love-time1-item']} style={{ animation: 'jianBian 60s linear infinite'}}>{timeLen.minute}</span>分
              <span className={style['love-time1-item']} style={{ animation: 'jianBian 60s linear infinite'}}>{timeLen.second}</span>秒
            </div>
          </div>
        </div>
        <MiddleCard/>
        <div className={style['lx-love__weiyan']}>
            <TreeCardList/>
            <TimeLine/>
        </div>
      </div>
    </div>
  );
}
